<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹出功能实现</title>
		<style>
			div{
	              width: 500px;
				  height: 500px;
				  background: #adeaea;
				  display: none;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- JQuery操作动画
		 
		 show()         功能：显示效果  本质： display：block；
		 hide()         功能：隐藏效果  本质：  display：none；
		 
		 slideDown()   功能：向下滑动式效果
		 slideUP()     功能: 向上滑动式效果
		 
		 fadeIn(毫秒数)    功能：淡入 本质 显示+透明度 0-1
		 fadeOut(毫秒数)   功能：淡出 本质 隐藏+透明度 1-0
		 
		 
		 
		 -->
	</head>
	<body>
		<button id="show">按钮</button>
		<button id="hide">隐藏按钮</button>
		<button id="slideD">向下按钮</button>
		<button id="slideU">向上按钮</button>
		<button id="fadeI">淡入</button>
		<button id="fadeO">淡出</button>
		<div></div>
		<script>
			/* JQuery动画 显示与隐藏 */
			$("#show").click(function(){
				$("div").show();
			});
			$("#hide").click(function(){
				$("div").hide();
			});
			$("#slideD").click(function(){
				$("div").slideDown();
			});
			$("#slideU").click(function(){
				$("div").slideUp();
			});
			$("#fadeI").click(function(){
				$("div").fadeIn(700);
			});
			$("#fadeO").click(function(){
				$("div").fadeOut(700);
			});
			$("#fadeO").click(function(){
				$("div").fadeOut(700);
			});
		/* 	$("button").click(function(){
				//隐藏 css属性直接给元素设置
				$("div").css("display","none");
			}); */
			
		</script>
	</body>
</html>